<template>
  <div
    class="map-box"
    :style="{ height: 6.28 * $store.state.radomRate + 'rem' }"
  >
    <div class="charBox">
      <div id="chartMap"></div>
      <el-button
        type="primary"
        size="mini"
        class="back"
        v-if="$store.state.loadMapJs != 'gc'"
        @click="back"
        >返回上一级</el-button
      >
    </div>
    <div class="info-list">
      <div
        class="item"
        :style="{ height: 1.13 * $store.state.radomRate + 'rem' }"
        v-for="(item, index) in listData"
        :key="index"
        @click="getData(item)"
      >
        <div class="title">{{ item.name }}</div>
        <div class="bt">
          <div
            class="clm"
            :style="{ height: 0.6 * $store.state.radomRate + 'rem' }"
          >
            <div>小组数量</div>
            <div>{{ item.groupCount }}</div>
          </div>
          <div class="clm">
            <div>微网格数</div>
            <div>{{ item.miniGridCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="55%"
      append-to-body
      ref="ruleForm"
    >
      <div class="pop-info">
        <div>组名：{{ groupName }}</div>
        <div>小组长：{{ groupManage }}</div>
        <div>巡查时长{{ hourNum }}小时</div>
        <div>社区干部：{{ villageManage }}</div>
        <div>联居干部：{{ jointVillageManage }}</div>
      </div>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column
          align="center"
          label="网格"
          prop="gridName"
          min-width="20%"
        />
        <el-table-column
          align="center"
          label="微网格"
          prop="name"
          min-width="25%"
        />
        <el-table-column
          align="center"
          label="微网格长"
          prop="manageUser"
          :show-overflow-tooltip="true"
          min-width="20%"
        />
        <el-table-column
          align="center"
          label="电话"
          prop="manageUserTel"
          min-width="20%"
        />
        <el-table-column
          align="center"
          label="户数"
          prop="houseNum"
          min-width="15%"
        />
      </el-table>
    </el-dialog>

  <gridTable ref="gridTable"/>
  </div>
</template>
<script>
import "../utils/gc.js";
import "../utils/1.js";
import "../utils/2.js";
import "../utils/3.js";
import "../utils/4.js";
import gridTable from './gridInfo.vue'
export default {
  components:{
    gridTable
  },
  data() {
    return {
      tableData:[],
      showGridTable:false,
      makerList: [],
      listData: [],
      scatterData: [],
      geoCoordMap: [],
      loading: false,
      tableList: [],
      dialogVisible: false,
      title: "小组信息",
      groupName: "",
      groupManage: "",
      villageManage: "",
      jointVillageManage: "",
      hourNum:'',
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.allList();
    this.gridList();
    this.getMapLocation();
    this.$store.commit("setMapId", "gc");
  },
  methods: {
    gridList() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.gridList, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.listData = res.data.data;
        })
        .catch(() => {});
    },
    allList() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.allList, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.makerList = res.data.data;
        })
        .catch(() => {});
    },
    // 绘制地图
    drawLine(isShow) {
      let that = this;
      var mapChart = this.$echarts.init(document.getElementById("chartMap"));
      mapChart.off("click");
      var option = {
        grid: {
          left: "10px",
          right: "10px",
          bottom: "10px",
          top: "5px",
          containLabel: true,
        },
        geo: {
          map: that.$store.state.loadMapJs,
          zoom: 1.15,
          roam: true,
          label: { show: true, color: "#8bb0f8" },
          // regions: [{ name: "", itemStyle: { areaColor: "#131C38" } }],
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 400,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(37,108,190,0.3)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(15,169,195,0.3)", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: "#4ecee6",
              borderWidth: 1,
            },

            emphasis: {
              label: { show: true, color: "#fff", fontSize: 35 },
              areaColor: {
                type: "linear-gradient",
                x: 0,
                y: 300,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(37,108,190,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(15,169,195,1)", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
            },
          },
          label: {
            show: true,
            color: "#fff",
            fontSize: 20,
          },

          emphasis: {
            label: { show: true, color: "#fff", fontSize: 23 },
            itemStyle: { areaColor: "#0848c2", borderColor: "#21c6ce" },
          },
        },
        tooltip: {
          show: isShow,
        }, // 不可省略
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 1,
            symbolSize: 14,
            data: that.convertData(that.scatterData),
            itemStyle: {
              //当前数据的样式
              normal: { color: "#F62157" },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#FFF",
                  fontSize: 13,
                },
                formatter: "{b}",
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            type: "map",
            geoIndex: 0,
            map: "gc",
            tooltip: {
              backgroundColor: "rgba(31,55,115,0.8)",
              padding: [8, 15],
              textStyle: { color: "#ffffff", fontSize: 18 },
              formatter: (params) => {
                if (params.name == "第一网格") {
                  return `
                      <div>微网格数：${this.listData[0].miniGridCount}</div>
                      <div>居民户数：${this.listData[0].houseCount}</div>
                      <div>居民人数：${this.listData[0].userCount}</div>
                      <div>商户：${this.listData[0].businessNum}</div>
                      <div>单位：${this.listData[0].unitNum}</div>
                    `;
                } else if (params.name == "第二网格") {
                  return `
                      <div>微网格数：${this.listData[1].miniGridCount}</div>
                      <div>居民户数：${this.listData[1].houseCount}</div>
                      <div>居民人数：${this.listData[1].userCount}</div>
                      <div>商户：${this.listData[1].businessNum}</div>
                      <div>单位：${this.listData[1].unitNum}</div>
                    `;
                } else if (params.name == "第三网格") {
                  return `
                      <div>微网格数：${this.listData[2].miniGridCount}</div>
                      <div>居民户数：${this.listData[2].houseCount}</div>
                      <div>居民人数：${this.listData[2].userCount}</div>
                      <div>商户：${this.listData[2].businessNum}</div>
                      <div>单位：${this.listData[2].unitNum}</div>
                    `;
                } else if (params.name == "第四网格") {
                  return `
                      <div>微网格数：${this.listData[3].miniGridCount}</div>
                      <div>居民户数：${this.listData[3].houseCount}</div>
                      <div>居民人数：${this.listData[3].userCount}</div>
                      <div>商户：${this.listData[3].businessNum}</div>
                      <div>单位：${this.listData[3].unitNum}</div>
                    `;
                }
              },
            },
          },
        ],
      };

      mapChart.setOption(option, true);
      // mapChart.value.on("mouseover", function() {
      //   mapChart.value.dispatchAction({
      //     type: "downplay",
      //   });
      // });
      mapChart.on("click", function (res) {
        // mapChart.setOption(option, true);
        console.log(res.componentSubType);
        if (res.name == "第一网格") {
          that.$store.commit("setMapId", 1);
          that.getGroupIdLocation(1);
        }
        else if(res.name.includes("党群服务中心")){
          that.$router.push("/community");
        } else if (res.name == "第二网格") {
          that.$store.commit("setMapId", 2);
          that.getGroupIdLocation(2);
        } else if (res.name == "第三网格") {
          that.$store.commit("setMapId", 3);
          that.getGroupIdLocation(3);
        } else if (res.name == "第四网格") {
          that.$store.commit("setMapId", 4);
          that.getGroupIdLocation(4);
        } else if (res.name.includes("组")) {
          that.groupList(res.data.id);
        }
      });
      window.addEventListener("resize", () => {
        mapChart.resize();
      });
    },
    groupList(id) {
      this.loading = true;
      let params = {
        time: this.time,
        groupId: id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.groupList, {
          time: this.time,
          groupId: id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.groupName = res.data.data.groupName;
          this.groupManage = res.data.data.groupManage;
          this.villageManage = res.data.data.villageManage;
          this.jointVillageManage = res.data.data.jointVillageManage;
          this.hourNum = res.data.data.hourNum;
          this.tableList = res.data.data.groupGridDtos;
          this.dialogVisible = true;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getMapLocation() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.getMapLocation, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          res.data.data.forEach((item) => {
            this.scatterData.push({
              name: item.name,
              value: item.id,
            });
          });
          res.data.data.forEach((item) => {
            this.geoCoordMap[item.name] = [item.lng, item.lat];
          });
          this.drawLine(true);
        })
        .catch(() => {});
    },

    getGroupIdLocation(grid) {
      this.scatterData = [];
      this.geoCoordMap = [];
      let params = {
        time: this.time,
        grid: grid,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.getGroupIdLocation, {
          time: this.time,
          grid: grid,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          res.data.data.forEach((item) => {
            this.scatterData.push({
              name: item.name,
              value: item.id,
              id: item.id,
            });
          });
          res.data.data.forEach((item) => {
            this.geoCoordMap[item.name] = [item.lng, item.lat];
          });
          this.drawLine(false);
        })
        .catch(() => {});
    },

    convertData(data) {
      var geoCoordMap = this.geoCoordMap;
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            id: data[i].id,
          });
        }
      }
      return res;
    },

    // 获取各个网格信息
    getData(item){
      let params = {
        time:this.time,
        grid:item.id
      }
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.indexList, {
          time: this.time,
          grid:item.id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.$refs.gridTable.tableDatas(res.data.data);
        })
        .catch(() => {});
    },



    back() {
      this.$store.commit("setMapId", "gc");
      this.scatterData = [];
      this.geoCoordMap = [];
      this.getMapLocation();
    },

  },
};
</script>
<style lang="less" scoped>
.map-box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #248fba;
  border-radius: 0.02rem;
  .charBox {
    height: 100%;
    flex: 2;
    position: relative;
    #chartMap {
      width: 100%;
      height: 100%;
    }
    .back {
      position: absolute;
      right: 0.2rem;
      bottom: 0.5rem;
    }
  }
  .info-list {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .item {
      background: url("../assets/net-bg.png") no-repeat;
      background-size: 100% 100%;
      width: 3.45rem;
      height: 1.13rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 999;
      .title {
        color: #fff;
        font-size: 0.22rem;
        display: flex;
        position: relative;
        left: 0.35rem;
      }
      .bt {
        column-count: 2;
        .clm {
          background: url("../assets/info-bg.png") no-repeat;
          background-size: 100% 100%;
          width: 1.15rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin:0 auto;
          div {
            font-size: 13px;
            &:first-child {
              color: #fff;
              letter-spacing: 0.02rem;
            }
            &:last-child {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
.pop-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
</style>